<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active {color: red}
    </style>
</head>

<body>

<div id="app">
    <cpn v-bind:cbooks="books" @item-click="cpnClick"></cpn>
</div>

<template id="cpn">
    <div>
        <!-- 选中事件变红 -->
        <button v-for="(item,index) in cbooks" @click="itemClick(item,index)" :class="{active:currentIndex == index}">{{item.name}}</button>
    </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 子模块
    const cpn = {
        template:'#cpn',
        props:['cbooks'],
        data(){
           return {
               currentIndex : 0
           }
        },
        methods:{
            itemClick(item,index){
                // 传递click事件
                this.currentIndex = index
                this.$emit('item-click', item)
            }
        }
    }

    const app = new Vue({
        el:'#app',
        data:{
            books:[{id:1,name:'西游记'},{id:2,name:'三国演义'},{id:3,name:'红楼梦'},{id:4,name:'水浒传'}]
        },
        methods: {
            cpnClick(item){
                console.log(item)
            }
        },
        components:{
            cpn
        }
    })
</script>
</body>
</html>